<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食物热量识别</title>
    <!-- 注意：这是原型展示文件，不是生产环境代码 -->
    <script src="https://cdn.tailwindcss.com/3.4.16"></script>
    <script>tailwind.config={theme:{extend:{colors:{primary:'#FF7D00',secondary:'#3A86FF'},borderRadius:{'none':'0px','sm':'4px',DEFAULT:'8px','md':'12px','lg':'16px','xl':'20px','2xl':'24px','3xl':'32px','full':'9999px','button':'8px'}}}}</script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.6.0/remixicon.min.css">
    <style>
        :where([class^="ri-"])::before { content: "\f3c2"; }
        body {
            font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
            background-color: #FAFAFA;
            color: #333;
        }
        .camera-button {
            box-shadow: 0 4px 20px rgba(255, 125, 0, 0.3);
            transition: transform 0.2s ease;
        }
        .camera-button:active {
            transform: scale(1.05);
        }
        .scan-area {
            border: 2px dashed #FF7D00;
            box-shadow: 0 0 0 4px rgba(255, 125, 0, 0.1);
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(255, 125, 0, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(255, 125, 0, 0); }
            100% { box-shadow: 0 0 0 0 rgba(255, 125, 0, 0); }
        }
        .progress-ring {
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
        }
        .progress-ring-circle {
            transition: stroke-dashoffset 0.35s;
            stroke: #FF7D00;
            stroke-width: 8;
        }
        .progress-ring-bg {
            stroke: #FFE0C2;
            stroke-width: 8;
        }
        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #FF7D00;
            cursor: pointer;
        }
    </style>
</head>
<body class="bg-white text-gray-800">
    <!-- 顶部导航栏 -->
    <nav class="fixed top-0 w-full bg-white shadow-sm z-50 px-4 py-3 flex justify-between items-center">
        <div class="text-xl font-['Pacifico'] text-primary">logo</div>
        <div class="flex items-center space-x-4">
            <div class="w-8 h-8 flex items-center justify-center cursor-pointer">
                <i class="ri-history-line ri-lg"></i>
            </div>
            <div class="w-8 h-8 flex items-center justify-center cursor-pointer">
                <i class="ri-user-3-line ri-lg"></i>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="pt-16 pb-16 min-h-screen">
        <!-- 主页面 -->
        <div id="main-page" class="flex flex-col items-center justify-center h-[calc(100vh-8rem)] px-6">
            <div class="mb-8 text-center">
                <h1 class="text-2xl font-bold mb-2">食物热量识别</h1>
                <p class="text-gray-500">拍照即可获取食物热量，轻松掌握健康饮食</p>
            </div>
            
            <button id="camera-btn" class="camera-button w-32 h-32 rounded-full bg-gradient-to-r from-primary to-orange-500 flex items-center justify-center mb-12 cursor-pointer !rounded-button">
                <div class="w-24 h-24 rounded-full bg-white flex items-center justify-center">
                    <i class="ri-camera-3-line ri-2x text-primary"></i>
                </div>
            </button>
            
            <div class="w-full max-w-xs">
                <div class="grid grid-cols-3 gap-4">
                    <div class="flex flex-col items-center cursor-pointer">
                        <div class="w-16 h-16 rounded-lg bg-blue-50 flex items-center justify-center mb-2">
                            <img src="https://readdy.ai/api/search-image?query=icon%2C%203D%20cartoon%2C%20Healthy%20meal%20plate%20with%20vegetables%20and%20protein%2C%20the%20icon%20should%20take%20up%2070%25%20of%20the%20frame%2C%20vibrant%20colors%20with%20soft%20gradients%2C%20minimalist%20design%2C%20smooth%20rounded%20shapes%2C%20subtle%20shading%2C%20no%20outlines%2C%20centered%20composition%2C%20isolated%20on%20white%20background%2C%20playful%20and%20friendly%20aesthetic%2C%20isometric%20perspective%2C%20high%20detail%20quality%2C%20clean%20and%20modern%20look%2C%20single%20object%20focus&width=64&height=64&seq=1&orientation=squarish" class="w-full h-full object-contain" alt="饮食记录">
                        </div>
                        <span class="text-xs text-center">饮食记录</span>
                    </div>
                    <div class="flex flex-col items-center cursor-pointer">
                        <div class="w-16 h-16 rounded-lg bg-green-50 flex items-center justify-center mb-2">
                            <img src="https://readdy.ai/api/search-image?query=icon%2C%203D%20cartoon%2C%20Nutrition%20analysis%20chart%20with%20colorful%20bars%2C%20the%20icon%20should%20take%20up%2070%25%20of%20the%20frame%2C%20vibrant%20colors%20with%20soft%20gradients%2C%20minimalist%20design%2C%20smooth%20rounded%20shapes%2C%20subtle%20shading%2C%20no%20outlines%2C%20centered%20composition%2C%20isolated%20on%20white%20background%2C%20playful%20and%20friendly%20aesthetic%2C%20isometric%20perspective%2C%20high%20detail%20quality%2C%20clean%20and%20modern%20look%2C%20single%20object%20focus&width=64&height=64&seq=2&orientation=squarish" class="w-full h-full object-contain" alt="营养分析">
                        </div>
                        <span class="text-xs text-center">营养分析</span>
                    </div>
                    <div class="flex flex-col items-center cursor-pointer">
                        <div class="w-16 h-16 rounded-lg bg-purple-50 flex items-center justify-center mb-2">
                            <img src="https://readdy.ai/api/search-image?query=icon%2C%203D%20cartoon%2C%20Community%20forum%20with%20speech%20bubbles%2C%20the%20icon%20should%20take%20up%2070%25%20of%20the%20frame%2C%20vibrant%20colors%20with%20soft%20gradients%2C%20minimalist%20design%2C%20smooth%20rounded%20shapes%2C%20subtle%20shading%2C%20no%20outlines%2C%20centered%20composition%2C%20isolated%20on%20white%20background%2C%20playful%20and%20friendly%20aesthetic%2C%20isometric%20perspective%2C%20high%20detail%20quality%2C%20clean%20and%20modern%20look%2C%20single%20object%20focus&width=64&height=64&seq=3&orientation=squarish" class="w-full h-full object-contain" alt="社区">
                        </div>
                        <span class="text-xs text-center">健康社区</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 拍摄引导页 -->
        <div id="camera-page" class="hidden h-screen bg-black relative">
            <div class="absolute top-4 left-4 z-10">
                <button id="back-to-main" class="w-10 h-10 rounded-full bg-black/50 flex items-center justify-center cursor-pointer">
                    <i class="ri-arrow-left-line text-white ri-lg"></i>
                </button>
            </div>
            
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[70%] aspect-square scan-area rounded-lg"></div>
            
            <div class="absolute top-[15%] left-0 w-full text-center text-white">
                <p class="px-6 py-2 bg-black/50 inline-block rounded-full text-sm">
                    将食物放入框内，确保光线充足
                </p>
            </div>
            
            <div class="absolute bottom-10 left-0 w-full flex justify-around items-center px-8">
                <button class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
                    <i class="ri-image-line text-white ri-xl"></i>
                </button>
                
                <button id="take-photo-btn" class="w-20 h-20 rounded-full bg-white flex items-center justify-center cursor-pointer !rounded-button">
                    <div class="w-16 h-16 rounded-full border-4 border-primary"></div>
                </button>
                
                <button class="w-14 h-14 rounded-full bg-white/20 flex items-center justify-center cursor-pointer">
                    <i class="ri-flashlight-line text-white ri-xl"></i>
                </button>
            </div>
        </div>

        <!-- 识别加载页 -->
        <div id="loading-page" class="hidden h-screen flex flex-col items-center justify-center px-6 bg-white">
            <div class="mb-8 relative">
                <svg class="progress-ring" width="120" height="120">
                    <circle class="progress-ring-bg" cx="60" cy="60" r="50" fill="transparent"/>
                    <circle id="progress-circle" class="progress-ring-circle" cx="60" cy="60" r="50" fill="transparent" 
                            stroke-dasharray="314" stroke-dashoffset="314"/>
                </svg>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                    <i class="ri-restaurant-line ri-2x text-primary"></i>
                </div>
            </div>
            
            <h2 class="text-xl font-medium mb-2">正在分析食物热量...</h2>
            <p id="loading-text" class="text-gray-500 text-center">AI 正在识别您的红烧肉，请稍候</p>
            
            <div class="mt-12 w-full max-w-xs p-4 bg-blue-50 rounded-lg flex items-center">
                <img src="https://readdy.ai/api/search-image?query=Healthy%20food%20advertisement%2C%20vibrant%20salad%20bowl%20with%20fresh%20vegetables%20and%20grains%2C%20bright%20natural%20lighting%2C%20professional%20food%20photography%20style%2C%20appetizing%20presentation%2C%20clean%20white%20background%2C%20centered%20composition%2C%20high%20resolution%20details%2C%20commercial%20quality%2C%20nutritious%20meal%20concept&width=80&height=80&seq=4&orientation=squarish" class="w-20 h-20 rounded-lg object-cover mr-4" alt="健康食品">
                <div>
                    <h3 class="font-medium text-sm">换种方式吃得更健康</h3>
                    <p class="text-xs text-gray-500 mt-1">低卡轻食，美味不减</p>
                </div>
            </div>
        </div>

        <!-- 识别结果页 -->
        <div id="result-page" class="hidden pt-16 pb-16 px-4">
            <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-medium">热量总览</h2>
                    <span class="text-xs text-gray-500">2025-04-20 13:45</span>
                </div>
                
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <div class="text-4xl font-bold text-primary">450<span class="text-lg ml-1">kcal</span></div>
                        <div class="flex items-center mt-2 text-sm text-gray-500">
                            <i class="ri-run-line mr-1"></i>
                            <span>相当于慢跑 60 分钟</span>
                        </div>
                    </div>
                    <div class="w-24 h-24">
                        <canvas id="nutrition-chart" width="96" height="96"></canvas>
                    </div>
                </div>
                
                <div class="flex justify-between text-xs text-center">
                    <div class="flex flex-col items-center">
                        <div class="w-3 h-3 rounded-full bg-green-500 mb-1"></div>
                        <span>蛋白质 25%</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-3 h-3 rounded-full bg-orange-500 mb-1"></div>
                        <span>脂肪 30%</span>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-3 h-3 rounded-full bg-blue-500 mb-1"></div>
                        <span>碳水 45%</span>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl shadow-sm p-6 mb-4">
                <h2 class="text-lg font-medium mb-4">食物详情</h2>
                
                <div class="space-y-4">
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-center mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="ri-rice-bowl-line text-primary ri-lg"></i>
                                </div>
                                <span class="font-medium">米饭</span>
                            </div>
                            <div class="text-sm text-gray-500">200g</div>
                        </div>
                        <div class="px-2">
                            <input type="range" min="50" max="300" value="200" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        </div>
                        <div class="flex justify-between text-xs text-gray-500 mt-1 px-2">
                            <span>50g</span>
                            <span>300g</span>
                        </div>
                    </div>
                    
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-center mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="ri-restaurant-2-line text-red-500 ri-lg"></i>
                                </div>
                                <span class="font-medium">红烧肉</span>
                            </div>
                            <div class="text-sm text-gray-500">150g</div>
                        </div>
                        <div class="px-2">
                            <input type="range" min="50" max="250" value="150" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        </div>
                        <div class="flex justify-between text-xs text-gray-500 mt-1 px-2">
                            <span>50g</span>
                            <span>250g</span>
                        </div>
                    </div>
                    
                    <div class="p-3 bg-gray-50 rounded-lg">
                        <div class="flex justify-between items-center mb-2">
                            <div class="flex items-center">
                                <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="ri-plant-line text-green-500 ri-lg"></i>
                                </div>
                                <span class="font-medium">青菜</span>
                            </div>
                            <div class="text-sm text-gray-500">100g</div>
                        </div>
                        <div class="px-2">
                            <input type="range" min="50" max="200" value="100" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
                        </div>
                        <div class="flex justify-between text-xs text-gray-500 mt-1 px-2">
                            <span>50g</span>
                            <span>200g</span>
                        </div>
                    </div>
                    
                    <button class="flex items-center justify-center w-full py-2 text-primary cursor-pointer">
                        <i class="ri-add-line mr-1"></i>
                        <span>添加更多食物</span>
                    </button>
                </div>
            </div>
            
            <div class="space-y-3">
                <button class="w-full py-3 bg-primary text-white font-medium rounded-lg shadow-sm cursor-pointer !rounded-button">
                    记录到今日饮食
                </button>
                
                <button class="w-full py-3 bg-white text-primary font-medium rounded-lg shadow-sm border border-primary cursor-pointer !rounded-button">
                    查看同类低卡推荐
                </button>
            </div>
        </div>

        <!-- 错误弹窗 -->
        <div id="error-modal" class="hidden fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-6">
            <div class="bg-white rounded-xl p-6 w-full max-w-xs">
                <div class="flex justify-center mb-4">
                    <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">
                        <i class="ri-error-warning-line text-red-500 ri-2x"></i>
                    </div>
                </div>
                
                <h3 class="text-lg font-medium text-center mb-2">抱歉，识别失败！</h3>
                <p class="text-sm text-gray-500 text-center mb-6">请尝试以下操作：</p>
                
                <div class="space-y-3">
                    <button id="retry-btn" class="w-full py-3 bg-primary text-white font-medium rounded-lg cursor-pointer !rounded-button">
                        重新拍摄
                    </button>
                    
                    <button class="w-full py-3 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 cursor-pointer !rounded-button">
                        手动输入食物名称
                    </button>
                    
                    <button class="w-full py-3 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 cursor-pointer !rounded-button">
                        联系客服反馈问题
                    </button>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <nav class="fixed bottom-0 w-full bg-white border-t border-gray-200 z-50">
        <div class="grid grid-cols-4 h-16">
            <div class="flex flex-col items-center justify-center cursor-pointer">
                <i class="ri-home-5-line ri-lg text-primary"></i>
                <span class="text-xs mt-1 text-primary">首页</span>
            </div>
            <div class="flex flex-col items-center justify-center cursor-pointer">
                <i class="ri-history-line ri-lg text-gray-400"></i>
                <span class="text-xs mt-1 text-gray-400">历史</span>
            </div>
            <div class="flex flex-col items-center justify-center cursor-pointer">
                <i class="ri-calendar-line ri-lg text-gray-400"></i>
                <span class="text-xs mt-1 text-gray-400">饮食计划</span>
            </div>
            <div class="flex flex-col items-center justify-center cursor-pointer">
                <i class="ri-user-3-line ri-lg text-gray-400"></i>
                <span class="text-xs mt-1 text-gray-400">我的</span>
            </div>
        </div>
    </nav>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 页面切换逻辑
            const mainPage = document.getElementById('main-page');
            const cameraPage = document.getElementById('camera-page');
            const loadingPage = document.getElementById('loading-page');
            const resultPage = document.getElementById('result-page');
            const errorModal = document.getElementById('error-modal');
            
            // 主页到相机页
            document.getElementById('camera-btn').addEventListener('click', function() {
                mainPage.classList.add('hidden');
                cameraPage.classList.remove('hidden');
            });
            
            // 相机页返回主页
            document.getElementById('back-to-main').addEventListener('click', function() {
                cameraPage.classList.add('hidden');
                mainPage.classList.remove('hidden');
            });
            
            // 拍照按钮到加载页
            document.getElementById('take-photo-btn').addEventListener('click', function() {
                cameraPage.classList.add('hidden');
                loadingPage.classList.remove('hidden');
                
                // 模拟加载进度
                const progressCircle = document.getElementById('progress-circle');
                const circumference = 2 * Math.PI * 50;
                progressCircle.style.strokeDasharray = `${circumference} ${circumference}`;
                
                let progress = 0;
                const loadingTexts = [
                    "AI 正在识别您的红烧肉，请稍候",
                    "正在计算热量...",
                    "分析营养成分中...",
                    "即将完成，请稍候..."
                ];
                const loadingTextElement = document.getElementById('loading-text');
                
                const interval = setInterval(() => {
                    progress += 5;
                    const offset = circumference - (progress / 100) * circumference;
                    progressCircle.style.strokeDashoffset = offset;
                    
                    // 更新加载文本
                    if (progress <= 25) {
                        loadingTextElement.textContent = loadingTexts[0];
                    } else if (progress <= 50) {
                        loadingTextElement.textContent = loadingTexts[1];
                    } else if (progress <= 75) {
                        loadingTextElement.textContent = loadingTexts[2];
                    } else {
                        loadingTextElement.textContent = loadingTexts[3];
                    }
                    
                    if (progress >= 100) {
                        clearInterval(interval);
                        
                        // 随机决定是否显示错误模态框
                        const showError = Math.random() < 0.3; // 30%概率显示错误
                        
                        setTimeout(() => {
                            loadingPage.classList.add('hidden');
                            if (showError) {
                                errorModal.classList.remove('hidden');
                            } else {
                                resultPage.classList.remove('hidden');
                                initNutritionChart();
                            }
                        }, 500);
                    }
                }, 60);
            });
            
            // 错误弹窗重试按钮
            document.getElementById('retry-btn').addEventListener('click', function() {
                errorModal.classList.add('hidden');
                cameraPage.classList.remove('hidden');
            });
            
            // 初始化营养饼图
            function initNutritionChart() {
                const chart = document.getElementById('nutrition-chart');
                if (!chart) return;
                
                const ctx = chart.getContext('2d');
                
                // 绘制饼图
                const centerX = chart.width / 2;
                const centerY = chart.height / 2;
                const radius = Math.min(centerX, centerY) - 5;
                
                const data = [
                    { value: 25, color: '#22C55E' }, // 蛋白质
                    { value: 30, color: '#F97316' }, // 脂肪
                    { value: 45, color: '#3B82F6' }  // 碳水
                ];
                
                let startAngle = -0.5 * Math.PI;
                data.forEach(segment => {
                    const endAngle = startAngle + (segment.value / 100) * (Math.PI * 2);
                    
                    ctx.beginPath();
                    ctx.moveTo(centerX, centerY);
                    ctx.arc(centerX, centerY, radius, startAngle, endAngle);
                    ctx.closePath();
                    
                    ctx.fillStyle = segment.color;
                    ctx.fill();
                    
                    startAngle = endAngle;
                });
                
                // 绘制中心白色圆形
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius * 0.6, 0, Math.PI * 2);
                ctx.fillStyle = 'white';
                ctx.fill();
            }
        });
        
        document.addEventListener('DOMContentLoaded', function() {
            // 滑动条交互
            const rangeInputs = document.querySelectorAll('input[type="range"]');
            rangeInputs.forEach(input => {
                input.addEventListener('input', function() {
                    const valueDisplay = this.closest('.p-3').querySelector('.text-gray-500');
                    if (valueDisplay) {
                        valueDisplay.textContent = this.value + 'g';
                    }
                });
            });
        });
    </script>
</body>
</html>
